<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>账号设置</title>
    <link rel="stylesheet" href="css/reset.css">
    <style>
        html,body {
            font-family: 'Microsoft YaHei';
            font-size: 14px;
            line-height:1;
            color: #666;
            width: 100%;
            height:100%;
            position: relative;
        }
        a {
            text-decoration: none;
            color: #666;
        }
        input {
            font-family: "Microsoft YaHei";
            color: #666;
            border: none;
        }
        input:focus {
            outline-color: transparent;
        }
        .container {
            width: 1200px;
            margin: 0 auto;
            position: relative;
        }
        .accountSet_btn {
            background: #fff;
            color: #333;
            width: 178px;
            height: 46px;
            line-height: 45px;
            padding:0 20px;
            border: 1px solid #333;
            box-sizing: border-box;
            float: right;
            cursor: pointer;
        }
        .accountSet_btn:active {
            background: #eee;
        }

        .bomb-boxs {
            background: rgba(0,0,0,0.4);
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 10;
        }
        .bomb {
            border-radius: 4px;
            /*position: relative;*/
            position: absolute;
            left: 50%;
            top: 50%;
            box-sizing: border-box;
            background: #fff;
        }
        .revisebomb {
            width: 700px;
            height: 346px;
            margin-top: -173px;
            margin-left: -350px;
        }
        .top {
            border-bottom: 2px solid #f3af33;
            margin: 9px 13px 0 13px;
            box-sizing: border-box;
            overflow: hidden;
        }
        .top .top-title {
            font-size: 18px;
            font-weight: bold;
            color: #f3af33;
            margin-bottom: 9px;
        }
        .close-btn {
            width: 20px;
            height:25px;
            text-align: center;
            line-height: 20px;
            background: #f3af33;
            border-radius: 0 0 20px 20px;
            position: absolute;
            top:0;
            right: 15px;
            cursor: pointer;
        }
        .close-btn:active {
            background: #e1a22e;
        }
        .close-btn .close-icon {
            width:14px;
            height:14px;
            display: inline-block;
            margin-top: 4px;
            background: url(image/icon.png) no-repeat -138px 0;
        }
        .form-con {
            margin: 37px 66px 0 98px;
            color: #333;
        }
        .form-con .form-group {
            margin-bottom: 22px;
            position: relative;
        }
        .form-con input{
            height: 30px;
            width: 302px;
            border: 1px solid #cbcbcb;
            border-radius: 15px;
            padding-left: 20px;
            box-sizing: border-box;
            color: #333;
            line-height: 28px;
            margin-left: 20px;
            font-family: "Microsoft YaHei";
        }
        .form-con input[type=checkbox]{
            width: 40px;
            height: 18px;
        }
        .form-con input[name=createDate] {
            width: 200px;
            margin-right: 60px;
        }
        .form-con .form-group label.labelName {
            width: 70px;
            display: inline-block;
            padding-left: 10px;
            line-height: 28px;
        }
        .form-con .form-group span {
            position: absolute;
            line-height: 32px;
        }
        .form-con .btn-form-group {
            width: 346px;
            margin: 30px auto 0;
            padding:0;
        }
        .form-group a {
            display: inline-block;
        }
        .openIf {
            display: inline-block;
        }
        .openIf label {
            vertical-align: middle;
        }
        .checkboxStyle {
            width: 40px;
            height: 18px;
            display: inline-block;
            cursor: pointer;
            background: url('image/off.png') no-repeat;
            margin-left: 16px;
            vertical-align: middle;
        }
        .checkboxStyle.on_check {
            background: url('image/on.png') no-repeat;
        }
        .checkboxStyle input {
            opacity: 0;
            cursor: pointer;
            -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
            filter:alpha(opacity=0);
        }
        /* 确认、取消按钮 */
        .btn {
            display: inline-block;
            width: 150px;
            height:35px;
            box-sizing: border-box;
            border-radius: 20px;
            text-align: center;
            line-height: 35px;
            margin: 8px 10px 0;
            cursor: pointer;
        }
        .btn.btn-submit {
            background: #f3af33;
            color: #fff
        }
        .btn.btn-quit {
            background: #f4f8f9;
            border: 1px solid #e5ebed;
            color: #4d6378;
        }
        .btn.btn-submit:active {
            background: #e1a22e;
        }
        .btn.btn-quit:active {
            background: #dfdfdf;
        }

    </style>
</head>
<body>
<div class="container">
    <div class="accountSet_btn">账号设置</div>
</div>

<!-- 弹框合集 -->
<div class="bomb-boxs" id="bomb-boxs" style="display: none">
    <!-- 修改个人资料弹框 -->
    <div class="bomb revisebomb">
        <div class="top">
            <div class="top-title fl">
                <div>修改个人资料</div>
            </div>
            <div class="close-btn fr">
                <a class="close-icon"></a>
            </div>
        </div>
        <div class="form-con">
            <div class="form-group">
                <label class="labelName">账号：</label>
                <input type="text" value="admin" name="accountName" readonly>
            </div>
            <div class="form-group">
                <span>*</span>
                <label class="labelName">密码：</label>
                <input type="password" name="psd">
            </div>
            <div class="form-group">
                <span>*</span>
                <label class="labelName" >昵称：</label>
                <input type="text" name="userName">
            </div>
            <!--<div class="form-group">
                <label class="labelName" >创建者：</label>
                <input type="text" placeholder="">
            </div>
            <div class="form-group">
                <label class="labelName" >创建日期：</label>
                <input type="text" name="createDate">
                <div class="openIf">
                    <label>是否启用:</label>
                    <div class="checkboxStyle"><input type="checkbox"></div>
                </div>
            </div>-->

            <div class="form-group btn-form-group">
                <a type="button" class="btn btn-submit">确定</a>
                <a type="button" class="btn btn-quit">取消</a>
            </div>
        </div>
    </div>
</div>

<script src="js/plugin/jquery.js"></script>
<script>
    $(function(){
//      =======点击账号设置按钮，让编辑弹框打开========
        var $accountSet_btn = $('.accountSet_btn');
        var $bombBoxs = $('.bomb-boxs');
        var $revisebomb = $('.revisebomb');

        var $closeBtn = $('.close-btn');
        var $btnQuit = $('.btn-quit');

//        打开弹框
        $accountSet_btn.click(function(){
            $bombBoxs.css({'display':'block'});
            $revisebomb.css({'display':'block'});
        });
//        关闭弹框
        $closeBtn.click(function(){
            closeRevisebomb ();
        });
        $btnQuit.click(function(){
            closeRevisebomb ();
        });
        function closeRevisebomb (){
            $bombBoxs.css({'display':'none'});
            $revisebomb.css({'display':'none'});
        }

        //动态获取token
        var token='';
        var id = '';
        $.post('http://120.77.83.63:8180/baod/login.shtml',{username:'root',password:'xwl001'},function(data){
            console.log(data);
            if(data.code == '1'){
                token = data.data.token;
                id = data.data.id;
                console.log(token);
                console.log(id);
            }
        },'json');

        /*var $psd = $('input[name="psd"]');
        var $userName = $('input[name="userName"]');*/
        var psd_new = $('input[name="psd"]').val();
        var userName_new = $('input[name="userName"]').val();

        $('.btn-submit').click(function(){
            console.log(token);
            console.log(id);
            $.post('http://120.77.83.63:8180/baod/user/editEntity.shtml',{token:token,id:id,password:psd_new,userName:userName_new},function(data){
                console.log(data);
                if(data.code == '1'){
                    alert('Ok')
                }else{
                    alert(data.msg);
                }
            },'json')
        })


    })
</script>
</body>
</html>